<template>
    <div>
        <el-tree
            :data="treeList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="treeData"
            @check="treeChange"
        ></el-tree>
    </div>
</template>

<script>
    export default {
        name: "tree",
        props: {
            treeList: {
                type: Array,
                default() {
                    return [];
                }
            },
            treeData: {
                type: Array
                // default() {
                //   return [];
                // }
            },
            defaultProps: {
                type: Object,
                default() {
                    return {
                        children: "children",
                        label: "label"
                    };
                }
            },
            defaultCheckedKeys: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {};
        },
        watch: {
            treeData(newValue, oldValue) {
                if (newValue) {
                    this.$refs.tree.setCheckedKeys(newValue);
                }
            }
        },
        methods: {
            treeChange(e) {
                // console.log(this.$refs.tree.getCheckedKeys())
                this.$emit("treeChange", this.$refs.tree.getCheckedKeys());
            }
        }
    };
</script>
<style scoped>
</style>
